<template>
  <div>
    <a-card>
      <div class="headeBox">
        <a-button type="danger"
                  icon="delete"
                  class="delBtn"> 批量删除 </a-button>
      </div>
      <a-table :row-selection="rowSelection" 
               :columns="columns" 
               :data-source="data"
               bordered>
        <a-switch default-checked
                  slot="recommend"
                  @change="onChange" />
        <a-button type="primary"
                  slot="operate" 
                  @click="showModal"
                  icon="eye"
                  class="viewBtn">查看</a-button>
        <a-button type="danger" 
                  slot="operate" 
                  icon="delete">删除</a-button>
      </a-table>

      <!-- 查看留言弹框 -->
        <a-modal
          title="查看"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="sumbit"
          @cancel="handleCancel">
          <div>留言信息</div>
        </a-modal>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
  },
  {
    title: '留言',
    dataIndex: 'title',
  },
  {
    title: '操作',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operate' },

  },
];
const data = [
  {
    key: '1',
    id: '1',
    title: '前端开发',
  },
  {
    key: '1',
    id: '1',
    title: 'node.js',
  }
];
export default {
  data() {
    return {
      data,
      columns,
      visible: false,
      confirmLoading: false,

    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {
    /**
     * 控制添加对话框的显示与隐藏
     */
    showModal() {
      this.visible = true;
    },

    /**
     * 弹框确定事件
     */
    sumbit(e) {
      this.confirmLoading = true;
      console.log(e);
      this.visible = false;
      this.confirmLoading = false;
      this.$message.success('添加标签成功');
    },

    /**
     * 弹框取消事件
     */
    handleCancel(e) {
      console.log('Clicked cancel button', e);
      this.visible = false;
    },
  }
}
</script>

<style lang="less" scoped>
.headeBox {
  margin-bottom: 20px;
}

.edit {
  margin-right: 10px;
}

.viewBtn {
  margin-right: 20px;
}

.delBtn {
  margin-left: 20px;
}
</style>
